<template>
         <div  v-if='!item.hidden'>
            <template v-if="hasOneShowingChild(item.children,item)  && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow" >
              <el-menu-item  :index="resolvePath(onlyOneChild.path)">
                  <u  v-if="onlyOneChild.meta.icon">
                    <i :class="onlyOneChild.meta.icon" v-if="(onlyOneChild.meta.icon.includes('el-icon'))"></i>
                    <svg-icon  v-else  class-name="international-icon" :icon-class="onlyOneChild.meta.icon"/>
                  </u>
                  <span slot='title'>{{$t('route.'+onlyOneChild.meta.title+'')}}</span>
              </el-menu-item>
            </template>
            <el-submenu  v-else  :index="resolvePath(item.path)" popper-append-to-body  >
              <template slot="title">
                  <i :class="item.meta.icon" v-if="item.meta.icon.includes('el-icon') "></i>
                  <svg-icon  v-else  class-name="international-icon" :icon-class="item.meta.icon"/>
                   <!-- {{item.meta.title}} -->
                  <span slot="title" v-show='!isnew'>{{$t('route.'+item.meta.title+'')}}</span>
              </template>
              <slide-item  :base-path="resolvePath(child.path)" v-for="child in item.children"  :item="child" :key="child.path" />
            </el-submenu>
          </div>
</template>
<script>
import path from 'path'
import {isExternal} from '@/utils/validate'
export default {
    name:'SlideItem',
    data(){
      this.onlyOneChild=null
      return{
          
      }
    },
    props:{
      item:{
        type:Object,
        require:true
      },
      isnew:{
         type: Boolean,
        require:true
      },
      
      basePath:{
        type:String,
        default:''
      }
    },
    computed:{
     
    },
    methods:{
      hasOneShowingChild(children = [],parent){
        const showingChildren=children.filter(item =>{
          if(item.hidden){
              return false
          }else{
            this.onlyOneChild=item;
            return true;
          }
        })
        if(showingChildren.length===1){
          return true
        }
        if(showingChildren.length===0){
            this.onlyOneChild={... parent ,path:'',noShowingChildren:true}
            return true
        }
        return false
      },
      resolvePath(routePath){
          if(isExternal(routePath)){
           return routePath
          }
           if (isExternal(this.basePath)) {
        return this.basePath
      }
           return path.resolve(this.basePath, routePath)
      }
    }
}
</script>
<style lang="scss" scoped>
   
</style>
